<template>
	<view class="order-manage">
		<!-- 顶部搜索及筛选区域 -->
		<view class="top-bar">
			<view class="cardform" labelPosition="left">
				<view class="status">
					<view class="status-btn" :class="{ active: currentTab === 'ongoing' }"
						@click="handleTabClick('ongoing')">
						已上架
					</view>
					<view class="status-btn" :class="{ active: currentTab === 'ended' }"
						@click="handleTabClick('ended')">
						未上架
					</view>
				</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;margin-bottom: 20rpx;">
				</view>
				<view class="activitylist" v-for="(item,index) in activitylist" :key="index" v-if="currentTab=='ongoing'">
					<view class="activityitem">
						<view style="margin-bottom: 20rpx;">{{item.title}}</view>
						<view v-if="item.status === '审核中'" style="color: orange;margin-bottom: 10rpx;">{{item.status}}
						</view>
						<view style="margin-bottom: 20rpx;">{{item.time}}</view>
						<button class="activity-btn1" @click="down(item)">
							下架
						</button>
					</view>
				</view>
				<view class="activitylist" v-for="(item,index) in activitylist1" :key="index"
					v-if="currentTab=='ended'">
					<view class="activityitem">
						<view style="margin-bottom: 10rpx;">{{item.title}}</view>
						<view v-if="item.status === 0" style="color: orange;margin-bottom: 10rpx;">
						审核中
						</view>
						<view v-else-if="item.status === 2" style="color: green;margin-bottom: 10rpx;">
							审核通过
						</view>
						<view v-else-if="item.status === 3" style="color: red;margin-bottom: 10rpx;">
							审核不通过
						</view>
						<view v-else-if="item.status === 5" style="color: red;margin-bottom: 10rpx;">
							已下架
						</view>
						<view>{{item.time}}</view>
						<button class="activity-btn" v-if="item.status===3|| item.status===0" @click="down(item)">
							下架
						</button>
						<button class="activity-btn" v-if="item.status===5" @click="del(item)">
							删除
						</button>
						<button class="activity-btn" v-if="item.status===2" @click="up(item)">
							上架
						</button>
					</view>
				</view>
			</view>
			<button @click="putactivity()" style="border-radius: 45rpx;color: white;background-color: blueviolet;margin-top: 60rpx;">
				上架活动
			</button>
		</view>
	</view>
</template>
<script>
	import {
		get,
		post,
		put
	} from '../../utils/request.js';
	export default {
		data() {
			return {
				currentTab: 'ongoing',
				activitylist: [{
					name: "阳春三月油江南活动开始报名",
					time: "2023-03-10 11:09",
					status: "已上架"
				}, {
					name: "阳春三月油江南活动开始报名",
					time: "2023-03-10 11:09",
					status: "已上架"
				}],
				activitylist1: [{
					name: "阳春三月油江南活动开始报名",
					time: "2023-03-10 11:09",
					status: "审核中"
				}, {
					name: "阳春三月油江南活动开始报名",
					time: "2023-03-10 11:09",
					status: "审核成功"
				}, {
					name: "阳春三月油江南活动开始报名",
					time: "2023-03-10 11:09",
					status: "审核失败"
				}]
			}
		},
		methods: {
			handleTabClick(tab) {
				// 点击时切换 currentTab 的值
				this.currentTab = tab;
			},
			putactivity(){
				uni.navigateTo({
					url:"/pages/LaunchActivity/LaunchActivity"
				})
			},
			async down(item){
				item.status=5
				console.log(item)
				await put('/dev-api/system/purchase',item)
			},
			async up(item){
				item.status=1
				console.log(item)
				await put('/dev-api/system/purchase',item)
			},
			async del(item){
				item.deleted=1
				console.log(item)
				await put('/dev-api/system/purchase',item)
			}
		},
		async onLoad() {
			console.log(uni.getStorageSync('merchant').id)
			const res= await get('/dev-api/system/purchase/mid/'+uni.getStorageSync('merchant').id,{})
			console.log(res)
			// this.activitylist=res
			this.activitylist = res.filter(item => Number(item.status) == 1);
			this.activitylist1 = res.filter(item => Number(item.status) != 1);
		}
	}
</script>

<style>
	.order-manage {
		background-color: #f5f5f5;
		min-height: 100vh;
		height: 2400rpx;
	}

	/* 顶部搜索及筛选 */
	.top-bar {
		padding: 10px;
		background-color: #2979ff;
		height: 200rpx;
	}

	.cardform {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		border-radius: 15rpx;
		padding-top: 15rpx;
		background-color: white;
		padding-bottom: 10rpx;
	}

	.status {
		background-color: aqua;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40%;
		height: 60rpx;
		margin-left: 30%;
		margin-right: 30%;
		margin-bottom: 15rpx;
		border-radius: 50rpx;
		margin-top: 25rpx;
	}

	.status-btn {
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
		color: #007bff;
		background-color: #fff;
	}

	/* 激活状态的样式，这里模拟切换颜色 */
	.status-btn.active {
		background-color: #007bff;
		color: #fff;
	}

	.activity-btn {
		background-color: #007bff;
		width: 160rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		border-radius: 40rpx;
		margin-left: 450rpx;
		margin-top: -130rpx;
		color: white;
	}

	.activity-btn1 {
		background-color: #007bff;
		width: 160rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		border-radius: 40rpx;
		margin-left: 450rpx;
		margin-top: -100rpx;
		color: white;
	}

	.activityitem {
		height: 130rpx;
		margin-bottom: 50rpx;
		padding-bottom: 20rpx;
	}
</style>